<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/1/19
  Time: 10:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="common/tag.jsp"%>
<html>
<head>
    <title>Title</title>
    <%@include file="common/head.jsp" %>
</head>
<body>
    <button type="button" class="btn btn-default" id="buttomYuan">源Ip</button>
    <button type="button" class="btn btn-default" id="buttonMudi">目的Ip</button>
    <div id="chartmain" style="width: 600px; height: 400px;"></div>
    <form action="<c:url value='${ctx}/rule/addRuleFast'/>" method="post" id="form" target="content">
        <input type="hidden" id="ipType" name="type" >
        <input type="hidden"  name="src_ip" id="src_ip" >
        <input type="hidden"  name="dst_ip" id="dst_ip" >
    </form>
</body>

<script type="text/javascript">
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
    chushihua(myChart);
    //每隔3秒执行一次timelyFun方法
    window.setInterval("fuzhi(myChart)",3000);


    //初始化echarts
    function chushihua(myChart){
        var option = {
            title : {
                text: 'ip总流量排序',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                y : 'bottom',
                data:['无']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [

                {
                    name:'面积模式',
                    type:'pie',
                    radius : [30, 110],
                    center : ['45%', 200],
                    roseType : 'area',
                    x: '50%',               // for funnel
                    max: 40,                // for funnel
                    sort : 'ascending',     // for funnel
                    data:[
                        {value:40, name:'无'}
                    ]
                }
            ]
        };


        myChart.setOption(option);
    }

    //从数据库读取数据赋值给echarts
    function fuzhi(myChart){
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "/ipSort/ipSortInfo",
            dataType : "json",
            success : function(data) {
                //创建一个数组，用来装对象传给series.data，因为series.data里面不能直接鞋for循环
                var servicedata=[];
                var serviceName=[];
                for(var i=0;i<data.length;i++){
                    var obj=new Object();
                    obj.name=data[i].ip;
                    obj.value=data[i].value;
                    servicedata[i]=obj;
                    serviceName[i]=obj.name;
                }
                myChart.setOption({
                    title : {
                        text: 'ip总流量排序',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        x : 'center',
                        y : 'bottom',
                        data:serviceName
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    series : [

                        {
                            name:'面积模式',
                            type:'pie',
                            radius : [20, 60],
                            center : ['45%', 200],
                            roseType : 'area',
                            x: '50%',               // for funnel
                            max: 40,                // for funnel
                            sort : 'ascending',     // for funnel
                            data:servicedata,
                        }
                    ]

                });

            }
        });
    }

    //默认设置为源ip固定，iptype="1"
    var ipType="1";
    $("#buttonYuan").click(function(){
        ipType="1";
    });
    $("#buttonMudi").click(function(){
        ipType="0";
    });
    myChart.on('click', function (params) {
        alert(params.data.name);
        if(params.data.name){
            if(ipType=="1"){
                $("#src_ip").val(params.data.name); //设置
                $("#dst_ip").val(""); //设置
            }else{
                $("#dst_ip").val(params.data.name); //设置
                $("#src_ip").val(""); //设置
            }
            $("#ipType").val(ipType); //设置
            $('#form').submit();
        }
    });
</script>
</html>
